<style>
.tb-oper-dropdown-menu{
	margin-top: 0 !important;
}
</style>
<template>
	<div class="page-census page-record">
		<div class="crumbs">
			<router-link to="/">首页</router-link> / <span class="active">应知应会管理</span>
		</div>
		<el-container :style="{height: mainH+'px'}">
		  	<el-aside class="area-blk" width="238px">
		  		<h2 class="hd">文章分类 (右键添加/编辑分类)</h2>
                <cate :cateList="cateList" ref="cateTree" @nodeClick="cateClickAction" @update="getCate"></cate>
		  	</el-aside>
		  	<el-main class="census-main">
		  		<div class="opers flex v-c">
		  			<el-form :inline="true" class="filter-blk flex-1">
						<el-form-item class="ml-20" label="文章标题">
							<el-input placeholder="请输入文章标题" v-model.trim="filterForm.title"></el-input>
						</el-form-item>
						<el-form-item class="ml-20" label="文章状态">
							<el-select v-model="filterForm.state" placeholder="请选择">
						      	<el-option :label="item" :value="index" v-for="(item, index) in stateList" :key="index"></el-option>
						    </el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="searchAction"><i class="iconfont icon-search"></i> 搜索</el-button>
							<el-button type="primary" @click="resetAction"><i class="iconfont icon-refresh"></i> 重置</el-button>
						</el-form-item>
					</el-form>
					<div>
						<el-button type="green" @click="newAction" :disabled="!$store.getters.hasEditPermission" v-if="hasPermission('030004')">
                            <i class="iconfont icon-add">新增</i> 
                        </el-button>
						<el-button type="blue" @click="multiChangeStatus(2)" v-if="hasPermission('030007')" :disabled="currentSelected.length==0 || !$store.getters.hasEditPermission">批量上线</el-button>
						<el-button type="blue" @click="multiChangeStatus(1)" v-if="hasPermission('030008')" :disabled="currentSelected.length==0 || !$store.getters.hasEditPermission">批量下线</el-button>
                    </div>
		  		</div>
		  		<el-table 
	  				:data="dataList" 
	  				style="width: 100%"
	  				v-loading="loading"
	  				@selection-change="handleSelectionChange">
	  				<el-table-column type="selection" width="55"></el-table-column>
				    <el-table-column type="index" label="序号" width="60" :index="indexMethod"></el-table-column>
				    <el-table-column prop="title" label="标题"></el-table-column>
				    <el-table-column prop="knowledgeType" label="分类">
                        <template slot-scope="scope">{{cateMap[scope.row.knowledgeType]}}</template>
                    </el-table-column>
				    <el-table-column prop="state" label="状态">
                        <template slot-scope="scope">{{stateList[scope.row.state]}}</template>
                    </el-table-column>
				    <el-table-column prop="time" label="创建时间"></el-table-column>
				    <el-table-column label="操作" :width="200">
				    	<template slot-scope="scope">
				    		<div class="nowrap" v-if="scope.row.state==2">
					    		<el-button type="green" @click="showReview(scope.row)" v-if="hasPermission('030010')">评论列表</el-button>
					    		<el-button type="blue" @click="changeStatus([scope.row.id],1)" v-if="hasPermission('030008')" :disabled="!$store.getters.hasEditPermission">下线</el-button>
                			</div>
				    		<div class="nowrap" v-else>
					    		<el-button type="green" @click="editAction(scope.row)" v-if="hasPermission('030006')" :disabled="!$store.getters.hasEditPermission">编辑</el-button>
					    		<el-button type="primary" @click="changeStatus([scope.row.id],2)" v-if="hasPermission('030007') && scope.row.state==1" :disabled="!$store.getters.hasEditPermission">上线</el-button>
					    		<el-button type="warning" @click="auditAction(scope.row.id)" v-if="hasPermission('030009') && scope.row.state==3" :disabled="!$store.getters.hasEditPermission">审核</el-button>
					    		<el-button type="danger" @click="deleteAction(scope.row)" v-if="hasPermission('030005')" :disabled="!$store.getters.hasEditPermission">删除</el-button>
                			</div>
				    	</template>
				    </el-table-column>
				</el-table>
				<el-pagination
					v-if="total>0"
					class="text-right mt-20 mr-20"
			      	@current-change="handleCurrentChange"
			      	:current-page="currentPage"
			      	:page-size="pageSize"
			      	layout="prev, pager, next, total, jumper"
			      	:total="total">
			    </el-pagination>
		  	</el-main>
		</el-container>
		<!-- 添加/编辑 start -->
		<el-dialog v-if="newModalVisible" :title="newModalTitle" :visible.sync="newModalVisible" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close>
			<New 
				ref="newData"
	    		:activeData="activeData"
				:cateList="cateList"
	    		@success="submitSuccessAction"
	    		@fail="adding = false"
	    		@submitting="adding = true"
	    		@cancel="newModalVisible=false"
	    	>
	    	</New>
	    	<div slot="footer">
	    		<el-button type="cancel" @click="newModalVisible=false">取消</el-button>
		  		<el-button type="primary" :loading="adding" @click="submitAction">确定</el-button>
		  	</div>
		</el-dialog>
		<!-- 添加/编辑 end -->
		
		<!-- 评论列表 start -->
		<el-dialog v-if="reviewModalVisible" :title="`评论列表（${activeData.title}）`" :visible.sync="reviewModalVisible" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close>
			<Review 
				ref="newData"
	    		:activeData="activeData"
	    	>
	    	</Review>
		</el-dialog>
		<!-- 评论列表 end -->
	</div>
</template>
<script>
import { mapState } from 'vuex'
import cate from '@/components/knowledge/Cate.vue'
import New from '@/components/knowledge/NewArticle.vue'
import Review from '@/components/knowledge/Review.vue'
export default {
	name: 'Notice',
	props: {
		winH: {
			type: Number,
			default: 500
		}
	},
	components: {
		New,
        cate,
		Review
	},
	data () {
		return {
			filterForm: {
                state: 0
            },
			total: 0,
			currentPage: 1,
			pageSize: 10,
			loading: false,
			dataList: [],
            activeCate: {id: ''},
			activeData: null,
			newModalTitle:'新增文章',
			newModalVisible:false,
			adding: false,
			deleting: false,
            stateList: ['全部','待发布','已发布', '待审核', '未通过'],
            cateList: [],
            reviewModalVisible: false,
			currentSelected: []
		}
	},
	computed: {
		...mapState([
			'scale',
            'siteInfos'
		]),
		mainH () {
			return this.winH-200
		},
        cateMap () {
            if(this.cateList.length ==0 ) return {}
            const temp = {}
            this.cateList.forEach(item=>{
                temp[item.id] = item.name
            })
            return temp
        }
	},
	created () {
        this.getCate()
		this.getData(1)
	},
	methods: {
		cateClickAction (data) {
            this.activeCate = data
			this.getData(1)
        },
        getCate () {
            this.$get('noticeAnnouncement/noticeAnnouncement/textTypeList').then(res=>{
                this.cateList = res.data
            })
        },
		handleSelectionChange (selectedData) {
			this.currentSelected = selectedData
		},
		getData (page) {
			this.loading = true
			let params = {
            	page: page,
			    limit: this.pageSize,
			    knowledgeType: this.activeCate.id==0? '' : this.activeCate.id,
                title: this.filterForm.title,
                state: this.filterForm.state == 0 ? '' : this.filterForm.state
            }
			this.$get('/noticeAnnouncement/noticeAnnouncement/getSafetyKnowledgeListPage', params).then(res => {
            	this.loading = false
            	let data = res.data
                this.currentPage = page
                this.total = data.totalSize
                this.dataList = data.Items
            }, (err) =>{
            	this.loading = false
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		handleCurrentChange (page){
			this.getData(page)
		},
        indexMethod (index) {
        	return (this.currentPage-1)*this.pageSize + index + 1;
        },
		searchAction () {
			this.getData(1)
		},
		resetAction () {
			this.filterForm = {
				state: 0
			}
		},
		getDataById (id,cbk) {
			this.$get('/business/business/detail', {
            	id: id
            }).then(res => {
            	let thisData = res.data
            	let thisIndustry = this.getSelectedIndustryById(this.industryList,thisData.industry)
            	thisData.industryName = thisIndustry ? thisIndustry.name : ''
            	cbk && cbk(thisData)
            }, (err) =>{
            	// 
            })
		},
		newAction (type) {
			this.newModalTitle ='新增文章'
			this.newModalVisible = true
			this.activeData = null
		},
		editAction (item) {
			this.activeData = item
            this.newModalTitle = `编辑文章：${item.title}`
            this.newModalVisible = true
		},
		deleteAction (item) {
			this.showConfirm ('确定删除该文章吗？',()=>{
				this.deleting = true
				this.$post('/noticeAnnouncement/noticeAnnouncement/delArticle', {
					id: item.id
				}).then(res => {
					this.deleting = false
	            	this.$message.success('删除成功')
	            	this.getData(this.currentPage)
	            }, (err) =>{
					this.deleting = false
	            	this.$message.error(err.msg)
	            })
			})
		},
		submitAction () {
			this.$refs.newData.submitAction()
		},
		changeStatus(idArr,state) {
			this.$post('/noticeAnnouncement/noticeAnnouncement/articleOperation', {
				id: idArr.join(','),
				state
			}).then(res => {
				this.deleting = false
				this.$message.success('操作成功')
				this.getData(this.currentPage)
			}, (err) =>{
				this.deleting = false
				this.$message.error(err.msg)
			})
		},

		multiChangeStatus(state){
			let ids = this.currentSelected.map(item=>item.id)
			this.changeStatus(ids,state)
		},
		auditAction(id){
			let warnImg = require('@/assets/images/icon-warn.png')
			let warnTip = `是否审核通过该文章<br>如果继续请点击“通过”，否则点击“拒绝”是否继续？`
			this.$confirm(`<img class="icon" src="${warnImg}"><br>${warnTip}`, '审核文章', {
				confirmButtonText: '通过',
				cancelButtonText: '拒绝',
				cancelButtonClass: 'el-button--cancel',
				dangerouslyUseHTMLString: true,
				customClass: 'confirm-msg-box',
				distinguishCancelAndClose: true
			}).then(() => {
				this.changeStatus([id],1)
			}).catch((action)=>{
				if(action=='cancel'){
					this.changeStatus([id],4)
				}
				// 
			})
		},
        showReview (item) {
            this.activeData = item
            this.reviewModalVisible = true
        },
		submitSuccessAction () {
			this.adding = false
			this.newModalVisible = false
			this.getData(this.currentPage)
		}
	},
}
</script>
